<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->

<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen">

<!-- jquery-ui Stylesheets -->
<link rel="stylesheet" href="assets/jui/css/jquery.ui.all.css" media="screen">
<link rel="stylesheet" href="assets/jui/jquery-ui.custom.css" media="screen">
<link rel="stylesheet" href="assets/jui/timepicker/jquery-ui-timepicker.css" media="screen">

<!-- Uniform Stylesheet -->
<link rel="stylesheet" href="plugins/uniform/css/uniform.default.css">

<!-- Plugin Stylsheets first to ease overrides -->

<!-- Circular Stat -->
<link rel="stylesheet" href="custom-plugins/circular-stat/circular-stat.css">

<!-- End Plugin Stylesheets -->

<!-- Main Layout Stylesheet -->
<link rel="stylesheet" href="assets/css/fonts/icomoon/style.css" media="screen">
<link rel="stylesheet" href="assets/css/mooncake.min.css" media="screen">
<link rel="stylesheet" href="assets/css/plugins/plugins.min.css" media="screen">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<title>MoonCake :: Responsive Admin Template</title>

</head>

<body>

    <div id="customizer">
        <div id="layoutMode">
            <label class="checkbox"><input type="checkbox" class="uniform" name="layout-mode" value="boxed"> Boxed</label>
        </div>
    </div>
    
	<div id="wrapper">
        <header id="header" class="navbar navbar-inverse">
            <div class="navbar-inner">
                <div class="container">
					<div class="brand-wrap pull-left">
						<div class="brand-img">
							<a class="brand" href="#">
								<img src="assets/images/logo.png" alt="">
							</a>
						</div>
					</div>
                    
                    <div id="header-right" class="clearfix">
						<div id="nav-toggle" data-toggle="collapse" data-target="#navigation" class="collapsed">
							<i class="icon-caret-down"></i>
						</div>
						<div id="header-search">
							<span id="search-toggle" data-toggle="dropdown">
								<i class="icon-search"></i>
							</span>
							<form class="navbar-search">
								<input type="text" class="search-query" placeholder="Search">
							</form>
						</div>
						<div id="dropdown-lists">
							<a class="item" href="#">
								<span class="item-icon"><i class="icon-exclamation-sign"></i></span>
								<span class="item-label">Notifications</span>
								<span class="item-count">4</span>
							</a>
							<a class="item" href="mail.html">
								<span class="item-icon"><i class="icon-envelope"></i></span>
								<span class="item-label">Messages</span>
								<span class="item-count">16</span>
							</a>
						</div>
                        
                        <div id="header-functions" class="pull-right">
                        	<div id="user-info" class="clearfix">
                                <span class="info">
                                	Welcome
                                    <span class="name">Shana-chan</span>
                                </span>
                            	<div class="avatar">
                                	<a class="dropdown-toggle" href="#" data-toggle="dropdown">
                                    	<img src="assets/images/pp.jpg" alt="Avatar">
                                    </a>
                                    <ul class="dropdown-menu pull-right">
                                    	<li><a href="profile.html"><i class="icol-user"></i> My Profile</a></li>
                                    	<li><a href="#"><i class="icol-layout"></i> My Invoices</a></li>                                        
                                        <li class="divider"></li>
                                        <li><a href="index.html"><i class="icol-key"></i> Logout</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div id="logout-ribbon">
                            	<a href="index.html"><i class="icon-off"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        
        <div id="content-wrap">
        	<div id="content">
            	<div id="content-outer">
                	<div id="content-inner">
                    	<aside id="sidebar">
                        	<nav id="navigation" class="collapse">
                            	<ul>
                                	<li>
                                    	<span title="General">
                                    		<i class="icon-home"></i>
											<span class="nav-title">General</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li><a href="dashboard.html"><i class="icol-dashboard"></i> Dashboard</a></li>
                                        	<li><a href="calendar.html"><i class="icol-calendar-2"></i> Calendar</a></li>
                                            <li><a href="icons.html"><i class="icol-lifebuoy"></i> Icons</a></li>
                                        	<li><a href="grids.html"><i class="icol-grid"></i> Grids</a></li>
                                        	<li><a href="typography.html"><i class="icol-font"></i> Typography</a></li>
                                        </ul>
                                    </li>
                                	<li>
                                    	<span title="Table">
                                    		<i class="icon-table"></i>
											<span class="nav-title">Table</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li><a href="tables.html"><i class="icol-style"></i> Static Tables</a></li>
                                        	<li><a href="responsive_tables.html"><i class="icol-hammer-screwdriver"></i> Responsive Tables</a></li>
                                        	<li><a href="data_tables.html"><i class="icol-table"></i> Data Tables</a></li>
                                            <li><a href="detail_view.html"><i class="icol-eye"></i> Detail View Table</a></li>
                                        </ul>
                                    </li>
                                	<li class="active">
                                    	<span title="Statistic">
                                        	<i class="icon-graph"></i>
											<span class="nav-title">Statistic</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li class="active"><a href="statistic.html"><i class="icol-chart-curve"></i> Statistical Elements</a></li>
                                        	<li><a href="charts_gallery.html"><i class="icol-chart-pie"></i> Charts Gallery</a></li>
                                        </ul>
                                    </li>
                                	<li>
                                    	<span title="Form">
                                        	<i class="icon-list"></i>
											<span class="nav-title">Form</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li><a href="form_layouts.html"><i class="icol-layout-select"></i> Form Layouts</a></li>
                                        	<li><a href="form_elements.html"><i class="icol-ui-text-field-password"></i> Form Elements</a></li>
											<li><a href="form_wizard.html"><i class="icol-wand"></i> Form Wizard</a></li>
                                        	<li><a href="form_validation.html"><i class="icol-accept"></i> Form Validation</a></li>
                                            <li><a href="wysiwyg.html"><i class="icol-pencil"></i> WYSIWYG</a></li>
                                        </ul>
                                    </li>
                                	<li>
                                    	<span title="Elements">
                                        	<i class="icon-cogs"></i>
											<span class="nav-title">Elements</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li><a href="ui_bootstrap.html"><i class="icol-ui-tab-content"></i> Bootstrap Elements</a></li>
											<li><a href="ui_components.html"><i class="icol-pipette"></i> Other Elements</a></li>
                                        	<li><a href="alerts.html"><i class="icol-error"></i> Alerts and Notifications</a></li>
                                            <li><a href="boxes.html"><i class="icol-cog"></i> Widget Boxes</a></li>
                                        	<li><a href="buttons.html"><i class="icol-joystick"></i> Buttons</a></li>
                                        	<li><a href="file_uploader.html"><i class="icol-computer"></i> File Uploader</a></li>
											<li><a href="file_manager.html"><i class="icol-databases"></i> File Manager</a>
                                        </ul>
                                    </li>
                                	<li>
                                    	<span title="Extra">
                                        	<i class="icon-gift"></i>
											<span class="nav-title">Extra</span>
                                        </span>
                                        <ul class="inner-nav">
                                            <li><a href="profile.html"><i class="icol-user"></i> Profile Page</a></li>
                                            <li><a href="mail.html"><i class="icol-email"></i> Mail Page</a></li>
                                            <li><a href="widgets.html"><i class="icol-ruby"></i> Custom Widgets</a></li>
                                            <li><a href="gallery.html"><i class="icol-images"></i> Image Gallery</a>
                                            <li><a href="contacts.html"><i class="icol-vcard"></i> Contact List</a></li>
                                            <li><a href="404.html"><i class="icol-error"></i> Error Page (404)</a></li>
                                        </ul>
                                    </li>

                                    <!-- Documentation -->
                                    <li>
                                        <a href="documentation/index.html" title="Documentation">
                                            <i class="icon-book"></i>
                                            <span class="nav-title">Docs</span>
                                        </a>
                                    </li>
                                    <!-- End -->
                                </ul>
                            </nav>
                        </aside>

                        <div id="sidebar-separator"></div>
                        
                        <section id="main" class="clearfix">
                        	<div id="main-header" class="page-header">
                            	<ul class="breadcrumb">
                                	<li>
                                    	<i class="icon-home"></i>MoonCake
                                        <span class="divider">&raquo;</span>
                                    </li>
                                    <li>
                                    	<a href="#">Statistic</a>
                                        <span class="divider">&raquo;</span>
                                    </li>
                                    <li>
                                    	<a href="#">Statistical Elements</a>
                                    </li>
                                </ul>
                                
                                <h1 id="main-heading">
                                	Statistical Elements <span>This page shows all statistical elements in this template</span>
                                </h1>
                            </div>
                            
                            <div id="main-content">
                                <h4 class="sub"><span>Summary Stats</span></h4>
                                <ul class="stats-container">
                                    <li>
                                        <a href="#" class="stat summary">
                                            <span class="icon">
                                                <i class="icon-stats"></i>
                                            </span>
                                            <span class="digit">
                                                <span class="text">Current Balance</span>
                                                $6,788
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat summary">
                                            <span class="icon">
                                                <i class="icon-fire"></i>
                                            </span>
                                            <span class="digit">
                                                <span class="text">Calories Burned</span>
                                                120,45 kcal
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat summary">
                                            <span class="icon">
                                                <i class="icon-database"></i>
                                            </span>
                                            <span class="digit">
                                                <span class="text">Database Backups</span>
                                                88
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat summary">
                                            <span class="icon">
                                                <i class="icon-hdd"></i>
                                            </span>
                                            <span class="digit">
                                                <span class="text">Available Disk</span>
                                                120 TB
                                            </span>
                                        </a>
                                    </li>
                                </ul>

                                <h4 class="sub"><span>Summary Stats - Circle</span></h4>
                                <ul class="stats-container">
                                    <li>
                                        <a href="#" class="stat summary">
                                            <span class="icon icon-circle bg-green">
                                                <i class="icon-stats"></i>
                                            </span>
                                            <span class="digit">
                                                <span class="text">Current Balance</span>
                                                $6,788
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat summary">
                                            <span class="icon icon-circle bg-red">
                                                <i class="icon-fire"></i>
                                            </span>
                                            <span class="digit">
                                                <span class="text">Calories Burned</span>
                                                120,45 kcal
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat summary">
                                            <span class="icon icon-circle bg-orange">
                                                <i class="icon-database"></i>
                                            </span>
                                            <span class="digit">
                                                <span class="text">Database Backups</span>
                                                88
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat summary">
                                            <span class="icon icon-circle bg-blue">
                                                <i class="icon-hdd"></i>
                                            </span>
                                            <span class="digit">
                                                <span class="text">Available Disk</span>
                                                120 TB
                                            </span>
                                        </a>
                                    </li>
                                </ul>

                                <h4 class="sub"><span>Summary Stats - Square</span></h4>
                                <ul class="stats-container">
                                    <li>
                                        <a href="#" class="stat summary">
                                            <span class="icon icon-square bg-green">
                                                <i class="icon-stats"></i>
                                            </span>
                                            <span class="digit">
                                                <span class="text">Current Balance</span>
                                                $6,788
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat summary">
                                            <span class="icon icon-square bg-red">
                                                <i class="icon-fire"></i>
                                            </span>
                                            <span class="digit">
                                                <span class="text">Calories Burned</span>
                                                120,45 kcal
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat summary">
                                            <span class="icon icon-square bg-orange">
                                                <i class="icon-database"></i>
                                            </span>
                                            <span class="digit">
                                                <span class="text">Database Backups</span>
                                                88
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat summary">
                                            <span class="icon icon-square bg-blue">
                                                <i class="icon-hdd"></i>
                                            </span>
                                            <span class="digit">
                                                <span class="text">Available Disk</span>
                                                120 TB
                                            </span>
                                        </a>
                                    </li>
                                </ul>

                                <h4 class="sub"><span>Circular Stats</span></h4>
                                <ul class="stats-container">
                                    <li>
                                        <a href="#" class="stat circular">
                                            <span rel="tooltip" title="111/220 Files Uploaded" 
                                                data-provide="circular" 
                                                data-fill-color="#08c" 
                                                data-value="169" 
                                                data-max-value="220" 
                                                data-radius="64" 
                                                data-thickness="21" 
                                                data-percent="false"
                                            ></span>
                                            <span class="text">Files Uploaded</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat circular">
                                            <span rel="tooltip" title="11.55% Survival Rate" 
                                                data-provide="circular" 
                                                data-decimals="2" 
                                                data-fill-color="#769f5d" 
                                                data-value="11.55" 
                                                data-radius="56" 
                                                data-thickness="15"
                                            ></span>
                                            <span class="text">Survival Rate</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat circular">
                                            <span rel="tooltip" title="76.88% Chance of Approval" 
                                                data-provide="circular" 
                                                data-decimals="2" 
                                                data-fill-color="#e95d3c" 
                                                data-value="76.88" 
                                                data-radius="48" 
                                                data-thickness="11"
                                            ></span>
                                            <span class="text">Chance of Approval</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat circular">
                                            <span rel="tooltip" title="34.2% Server Load" 
                                                data-provide="circular" 
                                                data-decimals="1" 
                                                data-fill-color="#ffa200" 
                                                data-value="34.2" 
                                                data-radius="40" 
                                                data-thickness="7"
                                            ></span>
                                            <span class="text">Server Load</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat circular">
                                            <span rel="tooltip" title="78% Disk Space Usage" 
                                                data-provide="circular" 
                                                data-fill-color="#666" 
                                                data-value="78" 
                                                data-radius="32" 
                                                data-thickness="4"
                                            ></span>
                                            <span class="text">Disk Space Usage</span>
                                        </a>
                                    </li>
                                </ul>

                                <h4 class="sub"><span>Circular Stats - Inline</span></h4>
                                <ul class="stats-container">
                                    <li>
                                        <a href="#" class="stat circular inline">
                                            <span rel="tooltip" title="34.2% Server Load" 
                                                data-provide="circular" 
                                                data-decimals="1" 
                                                data-fill-color="#ffa200" 
                                                data-value="34.2" 
                                                data-radius="40" 
                                                data-thickness="7"
                                            ></span>
                                            <span class="text">Server Load</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat circular inline">
                                            <span rel="tooltip" title="76.88% Chance of Approval" 
                                                data-provide="circular" 
                                                data-decimals="2" 
                                                data-fill-color="#e95d3c" 
                                                data-value="76.88" 
                                                data-radius="48" 
                                                data-thickness="11"
                                            ></span>
                                            <span class="text">Chance of Approval</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat circular inline">
                                            <span rel="tooltip" title="11.55% Survival Rate" 
                                                data-provide="circular" 
                                                data-decimals="2" 
                                                data-fill-color="#769f5d" 
                                                data-value="11.55" 
                                                data-radius="56" 
                                                data-thickness="15"
                                            ></span>
                                            <span class="text">Survival Rate</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat circular inline">
                                            <span rel="tooltip" title="111/220 Files Uploaded" 
                                                data-provide="circular" 
                                                data-fill-color="#08c" 
                                                data-value="169" 
                                                data-max-value="220" 
                                                data-radius="64" 
                                                data-thickness="21" 
                                                data-percent="false"
                                            ></span>
                                            <span class="text">Files Uploaded</span>
                                        </a>
                                    </li>
                                </ul>

                                <h4 class="sub"><span>Circular Stats - API</span></h4>
                                <div style=" text-align: center;">
                                    <div class="btn-toolbar">
                                        <span id="cs-val-btn" class="btn">Change Value</span>
                                        <span id="cs-rad-btn" class="btn">Change Radius</span>
                                        <span id="cs-th-btn" class="btn">Change Thickness</span>
                                        <span id="cs-dec-btn" class="btn">Change Decimals</span>
                                        <span id="cs-col-btn" class="btn">Change Fill Color</span>
                                    </div>
                                    <ul class="stats-container">
                                        <li>
                                            <a href="#" class="stat circular inline">
                                                <span id="cs-api-sample" data-provide="circular" data-value="25"></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <h4 class="sub"><span>Progress Stats</span></h4>
                                <ul class="stats-container">
                                    <li>
                                        <a href="#" class="stat progress-stat">
                                            <span class="text"><i class="icon-feather"></i> Designs Completed <span>130/200</span></span>
                                            <div class="progress progress-mini progress-info progress-striped active">
                                                <div class="bar" style="width: 65%;"></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat progress-stat">
                                            <span class="text"><i class="icos-cat"></i> Cats Tammed <span>77%</span></span>
                                            <div class="progress progress-mini progress-info progress-striped active">
                                                <div class="bar" style="width: 77%;"></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat progress-stat">
                                            <span class="text"><i class="icon-download"></i> Download Progress <span>136/400 Mb</span></span>
                                            <div class="progress progress-mini progress-success progress-striped active">
                                                <div class="bar" style="width: 34%;"></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="stat progress-stat">
                                            <span class="text"><i class="icon-wrench"></i> Defects Repaired <span>54%</span></span>
                                            <div class="progress progress-mini progress-warning progress-striped active">
                                                <div class="bar" style="width: 54%;"></div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        
        <footer id="footer">
            <div class="footer-left">MoonCake - Responsive Admin Template</div>
            <div class="footer-right"><p>Copyright 2012. All Rights Reserved.</p></div>
        </footer>
        
    </div>


	<!-- Core Scripts -->
	<script src="assets/js/libs/jquery-1.8.2.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="assets/js/libs/jquery.placeholder.min.js"></script>
	<script src="assets/js/libs/jquery.mousewheel.min.js"></script>
    
    <!-- Template Script -->
    <script src="assets/js/template.js"></script>
    <script src="assets/js/setup.js"></script>

    <!-- Customizer, remove if not needed -->
    <script src="assets/js/customizer.js"></script>

    <!-- Uniform Script -->
    <script src="plugins/uniform/jquery.uniform.min.js"></script>
    
    <!-- jquery-ui Scripts -->
    <script src="assets/jui/js/jquery-ui-1.8.24.min.js"></script>
    <script src="assets/jui/jquery-ui.custom.min.js"></script>
    <script src="assets/jui/timepicker/jquery-ui-timepicker.min.js"></script>
	<script src="assets/jui/jquery.ui.touch-punch.min.js"></script>
    
    <!-- Plugin Scripts -->
    
    <!-- Flot -->
    <!--[if lt IE 9]>
    <script src="assets/js/libs/excanvas.min.js"></script>
    <![endif]-->
    <script src="plugins/flot/jquery.flot.min.js"></script>
    <script src="plugins/flot/plugins/jquery.flot.tooltip.min.js"></script>
    <script src="plugins/flot/plugins/jquery.flot.pie.min.js"></script>
    <script src="plugins/flot/plugins/jquery.flot.resize.min.js"></script>

    <!-- Circular Stat -->
    <script src="custom-plugins/circular-stat/circular-stat.min.js"></script>

    <!-- SparkLine -->
    <script src="plugins/sparkline/jquery.sparkline.min.js"></script>

    <!-- Demo Scripts -->
    <script src="assets/js/demo/statistic.js"></script>

</body>

</html>
